<form onsubmit="return false;" action="{:request()->url()}" data-auto="true" method="post" class='layui-form layui-card'
      autocomplete="off">

    <div class="layui-card-body">

        <div class="layui-row margin-bottom-15">
            <label class="layui-col-xs5 think-form-label">分类名称</label>
            <label class="layui-col-xs2">
                <select class="layui-select" required name="cate">
                    {foreach $cates as $k=>$v}
                    {if isset($vo.cate) and $vo.cate eq $v['id']}
                    <option selected value="{$v['id']}">{$v['name']}</option>
                    {else}
                    <option value="{$v['id']}">{$v['name']}</option>
                    {/if}
                    {/foreach}
                </select>
            </label>
        </div>

        <div class="layui-row margin-bottom-15">
            <label class="layui-col-xs5 think-form-label">打开方式</label>
            <label class="layui-col-xs2">
                <select class="layui-select" required name="target">
                    {foreach ['_self','_blank','_parent','_top'] as $item}
                    {if isset($vo.target) and $vo.target eq $item}
                    <option selected value="{$item}">{$item}</option>
                    {else}
                    <option value="{$item}">{$item}</option>
                    {/if}
                    {/foreach}
                </select>
            </label>
        </div>

        <div class="layui-row margin-bottom-15">
            <label class="layui-col-xs5 think-form-label">链接名称</label>
            <label class="layui-col-xs4">
                <input name="name" required value='{$vo.name|default=""}' placeholder="请输入链接名称" class="layui-input">
            </label>
        </div>

        <div class="layui-row margin-bottom-15">
            <label class="layui-col-xs5 think-form-label">tips</label>
            <label class="layui-col-xs4">
                <input name="tips" required value='{$vo.tips|default=""}' placeholder="请输入提示信息" class="layui-input">
            </label>
        </div>
        <div class="layui-row margin-bottom-15">
            <label class="layui-col-xs5 think-form-label">排序</label>
            <label class="layui-col-xs5">
                <input name="sort" required value='{$vo.sort|default="100"}' placeholder="" type="number" class="layui-input">
            </label>
        </div>
        <div class="layui-row margin-bottom-15">
            <label class="layui-col-xs5 think-form-label">菜单图标</label>
            <div class="layui-col-xs5">
                <div class="layui-input-inline">
                    <input placeholder="请输入或选择图标" name="icon" value='{$vo.icon|default=""}' class="layui-input">
                </div>
                <span style="padding:0 12px;min-width:45px" class='layui-btn layui-btn-primary'>
                    <i style="font-size:1.2em;margin:0" class='{$vo.icon|default=""}'></i>
                </span>
                <button data-icon='icon' type='button' class='layui-btn layui-btn-primary'>选择图标</button>
                <p class="help-block">可选，设置菜单选项前置图标，目前只支持 Font Awesome 5.2.0 字体图标</p>
            </div>
        </div>

        <div class="layui-row margin-bottom-15">
            <label class="layui-col-xs5 think-form-label">log</label>
            <label class="layui-col-xs6">
                <input name="logo"  value="{$vo.logo|default=''}" class="layui-input">
            </label>
            <script>$('[name="logo"]').uploadOneImage()</script>
        </div>

        <div class="layui-row margin-bottom-15">
            <label class="layui-col-xs5 think-form-label">链接地址</label>
            <label class="layui-col-xs5">
                <input name="href" required value='{$vo.href|default=""}' placeholder="请输入链接地址" class="layui-input">
            </label>
        </div>


    </div>

    <div class="hr-line-dashed"></div>
    <div class="layui-form-item text-center">
        {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}
        <button class="layui-btn" type='submit'>保存数据</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
    </div>
</form>
{block name='script'}
<script>
    require(['jquery.autocompleter'], function () {
        $('[name="icon"]').on('change', function () {
            $(this).parent().next().find('i').get(0).className = this.value
        });
    });
</script>
{/block}